<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/public.css"/>
		<link rel="stylesheet" href="css/signIn.css"/>
		<script type="text/javascript" src="js/common.js" ></script>
	</head>
	<body>
		<div class="sign_main">
			<h2>后台管理登录系统</h2>
			<form>
				<h3 class="clear"><span>账号:</span><input id="username" type="text" placeholder="请输入账号"/></h3>
				<h3 class="clear"><span>密码:</span><input id="password" type="password"  placeholder="请输入密码"/></h3>
				<h3 class="clear"><span>验证码:</span><input class="verification" type="text" id="code_input" placeholder="请输入验证码"/><s id="v_container"></s></h3>
				<h4><div id="my_button">登录</div><button type="reset">重置</button></h4>
			</form>
		</div>
	</body>
</html>
<script src="js/jquery-1.8.3.min.js"></script>		
<script src="js/gVerify.js"></script>
<script src="js/commonNew.js"></script>		
<script type="text/javascript">
 
var browser={
    versions:function(){
        var u = navigator.userAgent, app = navigator.appVersion;
        //移动设备浏览器版本信息
        return {
            //IE内核
            trident: u.indexOf('Trident') > -1,
            //opera内核      
            presto: u.indexOf('Presto') > -1,
            //苹果、谷歌内核          
            webKit: u.indexOf('AppleWebKit') > -1,
            //火狐内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
            //是否为移动终端
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), 
            //ios终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
            //android终端或者uc浏览器
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, 
            //是否为iPhone或者QQHD浏览器
            iPhone: u.indexOf('iPhone') > -1 , 
            //是否iPad           
            iPad: u.indexOf('iPad') > -1,
            //是否web应该程序，没有头部与底部
            webApp: u.indexOf('Safari') == -1
        };
    }(), 
    language:(navigator.browserLanguage || navigator.language).toLowerCase()  
}   
   
if(browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad){    cssChange();     
}  
 
function cssChange(){
    var link = document.getElementsByTagName('link')[1];
    //PC端应用的样式文件：style_A.css
    //alert('当前应用样式文件是：'+link.getAttribute('href'));
    link.setAttribute('href','css/signIn_A.css');
    //Mobile端应用样式文件：style_B.css
    //alert('当前应用样式文件是：'+link.getAttribute('href'));
}
 var verifyCode = new GVerify("v_container");

		document.getElementById("my_button").onclick = function(){
			
			var username=document.getElementById("username").value
			var passwords=document.getElementById("password").value
			console.log(passwords)
			var code=document.getElementById("code_input").value
			var res = verifyCode.validate(code);
			
			if(username==""){
				alert("用户名不能为空");
				return;
			}
			if(passwords==""){
				alert("密码不能为空");
				return;
			}
			if(code==""){
				alert("验证码不能为空");
				return;
			}else if(!res){
				alert("验证码错误");
				return;
			}
			var data={};
			 data["username"] = username;
			 data["passwords"]=passwords;
			 console.log(data);
			 $.ajax({
            type: "post",
            url: Url + "login",
            data: data,
            dataType: 'json',
            crossDomain: true,
            async: false,
            timeout : 20000,
            beforeSend: function (xhr) {
                showDiv()
            },
            success: function (data) {
                hiddenDiv()
                console.log(data);
                //成功提示跳转list
                if(data)
                {
                	var info=JSON.stringify(data);
                	storage.setItem('userinfo',info)
                
                	if(storage.getItem('userinfo'))
                	{
                		taostr('登陆成功',1000);
                		location.href = 'index.html'
                	}
                }else
                {
                	 taostr('账号或密码不正确',1000);
                }
           
            },
            error: function (request, status, err) {
                failure(status)
            }
        })
				
		}
</script>